<template>
  <div style="height: 100%">
    <div class="file-search">
      <div class="file-search-operation">
        <div style="width: 300px;margin-right: 20px">
          <el-input
                  v-model="searchOption.fileTag"
                  placeholder="输入文件标签"
                  clearable
          ></el-input>
        </div>
        <div style="width: 300px;margin-right: 20px">
          <el-input
                  v-model="searchOption.fileName"
                  placeholder="输入文件名称"
                  clearable
          ></el-input>
        </div>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="page" type="primary">查询</el-button>
        <el-button @click="isFileAdd=true" type="warning">新增</el-button>
      </div>
    </div>

    <div class="file-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="tag" label="文件标签"> </el-table-column>
        <el-table-column prop="name" label="文件名"> </el-table-column>
        <el-table-column prop="url" label="地址"> </el-table-column>
        <el-table-column prop="createTime" label="上报时间">
          <template slot-scope="scope">
            <div v-text="new Date(scope.row.createTime).pattern('yyyy-MM-dd HH:mm:ss')">
            </div>
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
          <template slot-scope="scope">
            <el-button @click="deleteFile(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display:flex;justify-content: flex-end;margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchOption.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchOption.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-drawer
            title="新增文件"
            :visible.sync="isFileAdd"
            direction="rtl"
            :before-close="clearFileDrawer">
      <div class="file-drawer-input">

        <div>
          <div class="file-drawer-label">文件标签</div>
          <div style="width: 200px;">
            <el-input
                    v-model="file.tag"
                    placeholder="输入文件标签"
                    clearable
            ></el-input>
          </div>
        </div>

        <div>
          <el-upload
                  ref="upload"
                  mutible="false"
                  :action="fileUploadUrl"
                  :before-upload="beforeUpload"
                  :limit="1"
                  :on-success="uploadSuccess"
                  :on-remove="fileRemove"
                  >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">不超过2M</div>
          </el-upload>
        </div>

      </div>
      <div class="file-drawer-operator">
        <el-button @click="addFile" type="primary">确定</el-button>
        <el-button @click="fileDrawerClear">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from "@/util/axios";
import {url} from "@/util/axios";
export default {
  data() {
    return {
      fileUploadUrl: url+'/upload',
      file: {
        tag:null,
        name:null,
        url:null
      },
      fileList:[],
      isFileAdd: false,
      total:0,
      tableData: [
      ],
      searchOption: {
        fileTag: null,
        fileName: null,
        //当前页
        current: 1,
        //大小
        size: 5
      }
    }
  },
  methods: {
    //start:文件相关
    fileRemove: function(){
      this.fileList=[];
    },
    uploadSuccess: function(response) {
      this.fileList.push(response.data);
    },
    addFile: function(){
      if(this.file.tag==null || this.file.tag.length===0){
        this.$message({
          message:"标签不能为空",
          type:"warning"
        })
      }else if(this.fileList.length===0){
        this.$message({
          message:"请上传文件",
          type:"warning"
        })
      }else{
        this.$confirm('确定要增加吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.file.name=this.fileList[0].name;
          this.file.url=this.fileList[0].url;
          return axios({
            url: '/file/add',
            method: "GET",
            params: this.file
          })
        }).then(() => {
          this.$message({
            message:"添加成功",
            type:"success"
          });
          this.page();
          this.fileDrawerClear();
        })
      }
    },
    fileDrawerClear: function(){
      this.$refs.upload.clearFiles();
      this.isFileAdd=false;
      this.file.tag=null;
      this.file.name=null;
      this.file.url=null;
      this.fileList=[];
    },
    beforeUpload: function(file){
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过 2MB!');
      }
      return isLt2M;
    },
    clearFileDrawer: function(done){
      this.fileDrawerClear();
      done();
    },
    //end:文件相关
    resetSearch: function(){
      this.searchOption.deviceName=null;
      this.searchOption.deviceId=null;
    },
    page: function () {
      axios({
        url: '/file/list',
        method: "GET",
        params: this.searchOption
      }).then((res) => {
        let pageInfo=res.data.data;
        this.total = pageInfo.total;
        this.tableData=pageInfo.list;
      })
    },
    //size改变的回调
    handleSizeChange: function (size) {
      this.searchOption.size = size;
      this.page();
    },
    //current改变的回调
    handleCurrentChange: function (current) {
      this.searchOption.current = current;
      this.page();
    },
    deleteFile: function(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url: '/file/delete',
          method: "GET",
          params: {id:id}
        }).then(() => {
          this.$message({
            message: "删除成功!",
            type: "success"
          });
          this.page();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created:function(){
    this.page();
  }
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
